<!--
 * @FileDescription 标定操作选项
 * @Author 杨宇翔
 * @Date 20220627 14:30:20
 * @LastEditors 杨宇翔
 * @LastEditTime 20220627 14:30:20
-->
<template>
    <div class="calibration-options">
        <input type="checkbox" id="标定显示原点" hidden v-model="CalibrationComponent.Default.ShowOrigin.value">
        <label for="标定显示原点" v-show="CalibrationComponent.Default.Options.value.includes('显示原点')">
            <img src="/public/static/LaserRadar/ic_xianshiyuandian_normal.png">
            <span>显示原点</span>
        </label>

        <input type="checkbox" id="标定标定说明" hidden v-model="CalibrationComponent.Default.ShowTips.value">
        <label for="标定标定说明" v-show="CalibrationComponent.Default.Options.value.includes('标定说明')">
            <img src="/public/static/LaserRadar/ic_biaodingshuoming_normal.png">
            <span>标定说明</span>
        </label>

        <input type="checkbox" id="标定参数标定" hidden v-model="CalibrationComponent.Default.ShowForms.value">
        <label for="标定参数标定" v-show="CalibrationComponent.Default.Options.value.includes('参数标定')">
            <img src="/public/static/LaserRadar/ic_canshubiaoding_normal.png">
            <span>参数标定</span>
        </label>
    </div>
</template>

<script setup lang="ts">
import { CalibrationComponent } from './LaserRadarComponent';
</script>

<style scoped>
.calibration-options {
    position: absolute;
    right: 6rem;
    bottom: 2rem;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4rem;
}

label {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    gap: 0.5rem;
}

label>img {
    width: 7.4rem;
    height: 7.4rem;
}

span {
    color: #81859C;
    font-size: 1.6rem;
    font-weight: 500;
}

input:first-of-type:checked+label>img {
    content: url('/static/LaserRadar/ic_xianshiyuandian_select.png');
}

input:nth-of-type(2):checked+label>img {
    content: url('/static/LaserRadar/ic_biaodingshuoming_select.png');
}

input:last-of-type:checked+label>img {
    content: url('/static/LaserRadar/ic_canshubiaoding_select.png');
}
</style>